import React, {useState,useEffect,useRef} from 'react'
import User from './User'
import AddUser from './AddUser'
import { PageHeader,Modal,notification,Button} from 'antd'
import axios from 'axios'
import {
    PlusSquareOutlined,
} from '@ant-design/icons'

const UserIndex = () => {

    const [isAddvisible, setIsAddvisible] = useState(false)
    const addForm = useRef(null)
  
    //存对象信息
    const [formInfo, setFormInfo] = useState({})
  
    useEffect(()=>{
      axios.get("/api/admin/get_all_user_info").then(res=>{
        console.log(res.data)
        setFormInfo(res)
      })
    },[]) 
  
    const addFormOK=()=>{
      addForm.current.validateFields().then(value=>{
        console.log(value)
        setIsAddvisible(false)
        //从post到后端生成ID，方便删除和更新，自增长id
        axios.post('/api/users/register',{
          ...value,
        }).then(res=>{
          console.log(res)
          notification.info({
            message:'通知',
            description:
              '提交成功，请自行查看',
            placement:"bottomRight",
          });
        })
      }).catch(err=>{
        console.log(err)
      })
    }
    return (
        <div>
            <PageHeader
                className="用户信息"
                title="用户"
                subTitle="Question"
            />
            <Button type="primary" 
                icon={<PlusSquareOutlined />}
                onClick={()=>{setIsAddvisible(true)}}
                style={{opacity: 0.6,backgroundColor:"Highlight"}}
            >添加用户</Button>
            <Modal
                visible={isAddvisible}
                title="添加用户"
                okText="确定"
                cancelText="取消"
                onCancel={()=>{
                setIsAddvisible(false)
            }}
                onOk={() => addFormOK() }
            >
                <AddUser ref={addForm}/>
            </Modal>
            <div style={{overflow:"auto", marginTop:"10px"}}>
                <User />
            </div>
        </div>
    )
}

export default UserIndex